<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path
      d="M19 6L4.99998 6C4.47006 6 3.95994 6.21 3.59004 6.58996C3.21006 6.95998 3 7.47 3 8.00004L3 18C3 18.53 3.21006 19.04 3.59004 19.41C3.95994 19.79 4.47006 20 4.99998 20L19 20C19.5299 20 20.0401 19.79 20.41 19.41C20.7899 19.04 21 18.53 21 18L21 8.00004C21 7.47 20.7899 6.95998 20.41 6.58996C20.0401 6.21 19.5299 6 19 6Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
    <path
      d="M14 2L10 2C9.47 2 8.96 2.21 8.59 2.59C8.21 2.96 8 3.47 8 4L8 6L16 6L16 4C16 3.47 15.79 2.96 15.41 2.59C15.04 2.21 14.53 2 14 2Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
  </svg>
</template>

<script>
  import config from './config' // 导入配置文件
  const { transionDuration, activeColor, inactiveColor } = config

  export default {
    name: 'product-list-svg',
    props: {
      active: { default: false },
      transiton: {
        type: Number,
        default: transionDuration,
      },

      activeColor: {
        type: String,
        default: activeColor,
      },
      inactiveColor: {
        type: String,
        default: inactiveColor,
      },
    },
    computed: {
      style() {
        return { transition: `stroke ${this.transiton}s ease` }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
